<template>
  <div class="salesPlatform default-layout">
    <top-header>
      <p
        :data-text="titleName"
        class="text-default-style title-size"
        slot="title_text"
      >
        {{ titleName }}
      </p>
      <p
        :data-text="introText"
        class="text-default-style intro-size"
        slot="intro_text"
      >
        {{ introText }}
      </p>
    </top-header>
    <div class="layout-content constructor-layout column-flex">
      <div class="top-content rows-flex">
        <data-info-tip
          v-for="item in dataList"
          :key="item.title"
          :list="item"
        />
      </div>
      <div class="bottom-content rows-flex">
        <div class="map-wrap wrap-style">
          <div class="hander-top rectangle-wrapBg">销售情况分布</div>
          <!--弹窗-->
          <div
            :class="['layer', `item-${item[3]}`]"
            ref="layer"
            v-for="(item, index) in mapLayerList"
            :key="index"
          >
            <div class="content">
              <p>{{ item[0] }}</p>
              <p>色纱库存：{{ item[1] }}吨</p>
              <p>色纱月销量：{{ item[2] }}公斤</p>
            </div>
          </div>
          <china-map :map-data-list="mapList" />
        </div>
        <div class="list-wrap column-flex">
          <div class="top-wrap wrap-style column-flex">
            <div class="hander-top square-wrapBg">销量TOP10</div>
            <div class="rows-flex seamless-wrap">
              <div class="seamless">
                <seamless :table-list="colorTable" :type="1"></seamless>
              </div>
              <div class="seamless">
                <seamless :table-list="materielTable" :type="2"></seamless>
              </div>
            </div>
          </div>
          <div class="bottom-ecarts wrap-style">
            <div class="hander-top square-wrapBg">30天销售额走势</div>
            <div class="echarts-wrap">
              <line-echart
                :options="echartConfig"
                :data-list="lineEchartsData"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import topHeader from "@/components/topHeader.vue";
import dataInfoTip from "@/components/dataCase/dataInfoTip.vue";
import { sale } from "@/services/sale.js";
import { mapState, mapMutations } from "vuex";
export default {
  name: "salesPlatform",
  data() {
    return {
      dataList: [
        {
          title: "年销售额",
          numTitle: "金额：",
          num: 0,
          unit: "万元",
        },
        {
          title: "月销售额",
          numTitle: "金额：",
          num: 0,
          unit: "万元",
        },
        {
          title: "周销售额",
          numTitle: "金额：",
          num: 0,
          unit: "万元",
        },
        {
          title: "日销售额",
          numTitle: "金额：",
          num: 0,
          unit: "万元",
        },
      ],
      colorTable: {
        header: ["TOP10", "色号", "销量"],
        listData: [],
      },
      materielTable: {
        header: ["TOP10", "物料", "销量"],
        listData: [],
      },
      echartConfig: {
        name: "单位：元",
        status: false,
        toolStyle: ["#4efeea", "#258177"],
        lineStyle: ["#539aed"],
        areaStyle: [[`rgba(46, 36, 130, 0.8)`, ` rgba(46, 36, 130, 0.3)`]],
      },
      lineEchartsData: {
        x: [],
        y: [],
      },
      mapList: [],
    };
  },
  components: {
    topHeader,
    dataInfoTip,
  },
  computed: {
    ...mapState({
      mapLayerList: (state) => state.sale.mapLayerList,
    }),
    titleName() {
      return this.$route.meta.title;
    },
    introText() {
      return this.$route.meta.intro;
    },
  },
  mounted() {
    this.getSale();
  },
  methods: {
    ...mapMutations({
      setMapLayerList: "sale/setMapLayerList",
      resetMapLayerList: "sale/resetMapLayerList",
    }),

    loopsiloop() {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.getSale();
      }, 65000);
    },
    async getSale() {
      let { data, ok } = await sale.getSale();
      if (ok && data.code === 500) return alert(data.msg);
      this.reset();
      this.dataList[0].num = data.data.yearProductionPriceNumber;
      this.dataList[1].num = data.data.monthProductionPriceNumber;
      this.dataList[2].num = data.data.weekProductionPriceNumber;
      this.dataList[3].num = data.data.dayProductionPriceNumber;
      this.colorTable.listData = data.data.sellNumberTops;
      this.materielTable.listData = data.data.sellGoodsNumberTops;

      data.data.daySellNumbers.map((item) => {
        this.lineEchartsData.x.push(item.day.substring(5));
        this.lineEchartsData.y.push(item.totalPrice);
      });

      if (data.data.baseRepositories.length !== 0) {
        let baseRepositories = data.data.baseRepositories;

        let anYangI =
          baseRepositories.some((i) => i.baseName == "安阳物流基地") &&
          baseRepositories.findIndex((item) => item.baseName == "安阳物流基地");
        let nantongI =
          baseRepositories.some((i) => i.baseName == "南通物流基地") &&
          baseRepositories.findIndex((item) => item.baseName == "南通物流基地");
        let changzhouI =
          baseRepositories.some((i) => i.baseName == "常州物流基地") &&
          baseRepositories.findIndex((item) => item.baseName == "常州物流基地");
        let zhujiI =
          baseRepositories.some((i) => i.baseName == "诸暨物流基地") &&
          baseRepositories.findIndex((item) => item.baseName == "诸暨物流基地");
        if (nantongI !== false) {
          this.setMapLayerList([
            "南通基地",
            baseRepositories[nantongI].totalNum,
            baseRepositories[nantongI].sellNumber,
            0,
          ]);
          this.mapList.unshift([121.05, 32.08]);
        }
        if (anYangI !== false) {
          this.setMapLayerList([
            "安阳基地",
            baseRepositories[anYangI].totalNum,
            baseRepositories[anYangI].sellNumber,
            1,
          ]);
          this.mapList.unshift([114.352482, 36.103442]);
        }
        if (changzhouI !== false) {
          this.setMapLayerList([
            "常州基地",
            baseRepositories[changzhouI].totalNum,
            baseRepositories[changzhouI].sellNumber,
            2,
          ]);
          this.mapList.unshift([119.58, 31.4]);
        }
        if (zhujiI !== false) {
          this.setMapLayerList([
            "诸暨基地",
            baseRepositories[zhujiI].totalNum,
            baseRepositories[zhujiI].sellNumber,
            3,
          ]);
          this.mapList.unshift([120.2327, 29.72597]);
        }
      }
      this.loopsiloop();
    },
    reset() {
      this.lineEchartsData = {
        x: [],
        y: [],
      };
      this.mapList = [];
      this.resetMapLayerList([]);
    },
  },
};
</script>

<style lang='less' scoped>
.salesPlatform {
  height: 100%;
  width: 100%;
  min-width: 1920px;
  min-height: 1080px;
  .title-size {
    font-size: 3rem;
  }
  .intro-size {
    font-size: 1rem;
  }
  .layout-content {
    height: 89%;
    width: 98%;
    .top-content {
      width: 100%;
      height: 15%;
    }
    .bottom-content {
      height: 84%;
      width: 100%;
      .map-wrap {
        width: 54.5%;
        height: 100%;
        position: relative;
        #chinaMap {
          height: 96%;
          width: 100%;
          background: url("../assets/images/map-bg.png") no-repeat;
          background-size: 100%;
        }
      }
      .list-wrap {
        width: 45%;
        height: 100%;
        .top-wrap,
        .bottom-ecarts {
          height: 49.25%;
          width: 100%;
          .seamless-wrap {
            position: relative;
            height: 88%;
            .seamless {
              position: relative;
              width: 45%;
              height: 100%;
            }
            &::after {
              content: "";
              position: absolute;
              top: 0;
              left: 50%;
              transform: translateX(-50%);
              height: 100%;
              width: 0.1rem;
              background-image: linear-gradient(
                to bottom,
                #539aed 0%,
                #539aed 50%,
                transparent 50%
              );
              background-size: 0.1rem 1rem;
              background-repeat: repeat-y;
            }
          }
          .echarts-wrap {
            position: relative;
            height: 90%;
            width: 100%;
          }
        }
      }
    }
  }
  /*懒加载图标动画*/
  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  /*弹窗样式*/
  .layer {
    position: absolute;
    z-index: 100;
    width: 200px;
    height: 160px;
    background: url(../assets/images/text-wrap.png) no-repeat;
    background-size: 100%;
    transform: translate(-100%, -100%);
    .content {
      width: 100%;
      height: 100%;
      position: relative;
      p {
        color: #fff;
        line-height: 2rem;
        &:nth-child(1) {
          font-size: 2rem;
          padding: 1.5rem 0.5rem 0.5rem 2rem;
        }
        &:nth-child(2) {
          padding-left: 2rem;
        }
        &:nth-child(3) {
          padding-left: 2rem;
        }
      }
      &::after {
        content: "";
        width: 20px;
        height: 2px;
        background: #8dc1ff;
        position: absolute;
        right: -13px;
        top: 50%;
        transform: translateY(-50%);
      }
      &::before {
        content: "";
        width: 2px;
        height: 80px;
        background: #8dc1ff;
        position: absolute;
        right: -27px;
        top: 77px;
        transform: rotateZ(-20deg);
      }
    }
    &.item-0 {
      right: -179px;
      bottom: 211px;
      .content {
        &::before {
          right: 224px;
          top: 74px;
          transform: rotateZ(20deg);
        }
        &::after {
          right: 193px;
          top: 77px;
        }
      }
    }
    &.item-1 {
      left: 620px;
      top: 349px;
    }
    &.item-2 {
      left: 705px;
      top: 518px;
      .content {
        &::before {
          display: none;
        }
        &::after {
          width: 40px;
          right: -33px;
        }
      }
    }
    &.item-3 {
      right: -178px;
      bottom: 18px;
      .content {
        &::before {
          right: 230px;
          top: 3px;
          transform: rotateZ(152deg);
        }
        &::after {
          right: 193px;
          top: 77px;
        }
      }
    }
  }
}
</style>